<template>
    <div class="classify">
        <mu-appbar title="分类">
            <mu-icon-button slot="left"/>
            <mu-icon-button icon="search" slot="right" :to="{ name :'Search'}" />
        </mu-appbar>

        <div class="all-num">
            <mu-raised-button :label="'全部课程 '+totalnum" class="demo-raised-button" primary/>
        </div>

        <div class="classify-list" v-for="(c,i) in classifys" :key="i">
            <div class="big-classify">
                <mu-icon value="star" :size="22" color="red"/>
                <span>{{ c.xsm }}</span>
            </div>
            <mu-divider/>
            <div class="second-classify">
                <mu-chip class="demo-chip" backgroundColor="green" color="white" v-for="(sc,ci) in c.sub" :key="ci">
                    <router-link :to="{name:'ClassifyCourse', params:{yxid:sc.yxid,xsm:sc.xsm }}">{{ sc.xsm }}</router-link>
                </mu-chip>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'Classify',
    computed: {
      classifys() {
        return this.$store.state.classifys.data;
      },
      totalnum() {
        return this.$store.state.classifys.count;
      }
    },
    data() {
      return {
        bottomNav: 'Classify',
      }
    },
    created() {
      this.$store.dispatch('getCourseClassify');
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .classify {
        padding-bottom: 4rem;
    }

    .all-num {
        margin: 10px;
    }

    .all-num button {
        width: 100%;
        padding: 0.2rem 2rem;
        height: auto;
        text-align: left;
        border-radius: 8px;
        margin-top: 0.5rem;
    }

    .big-classify {
        height: 2.6rem;
        width: 100%;
        clear: both;
        font-size: 18px;
        padding: 10px;
        margin-top: 0.8rem;
    }

    .big-classify i {
        display: block;
        float: left;
        margin-right: 6px;
    }

    .big-classify span {
        display: block;
        float: left;
        font-size: 16px;
    }

    .second-classify {
        padding: 8px 10px;
    }

    .demo-chip {
        margin: 6px 10px 0 0;
        padding-left: 15px;
        padding-right: 15px;
    }

    .demo-chip a {
        color: white;
        font-size: 13px;
    }
</style>
